<template>
  <div>
    <Menu  :isMobile="isMobile" :isMenuOpen="isMenuOpen" />
   <div class="layout-main" :class="{open:isMenuOpen,mobile:isMobile}">
     <router-view></router-view>
   </div>
  </div>
</template>

<script lang="ts" setup>
import  Menu from './Menu.vue'
import {computed, onMounted, ref} from "vue";
import {useAppStore} from "/@/documentation/store/app";
const appStore = useAppStore()

const isMobile = computed(()=>{
  return appStore.isMobile
})

const isMenuOpen = computed(()=>{
  return appStore.isMenuOpen
})

</script>

<style lang="scss" scoped>
.layout-main {
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  right: 0;


  padding: 16px 16px 26px;
  transition: all 0.3s;
  overflow: auto;
  &.open {
   left: 270px;
  }
  &.mobile {
    left: 0!important;
  }
}
</style>